@import "~terriajs-variables";
@import "../../../../Sass/common/mixins";
@include empty-module("url-input");
@include empty-module("inner");

.tab-panels {
  width: 50%;
  max-width: 600px;
  margin: 3vh auto;
  text-align: left;
  padding-top: 10vh;
}
.tab-panel {
  text-align: left;
}

.label {
  composes: label from "../../../../Sass/common/_labels.scss";

  padding-left: 0;
  font-size: $font-size-mid-small;
}

.tabHeading {
  font-weight: 500;
  border-bottom: 1px solid $dark-lighter;
  margin-bottom: 3vh;
  display: inline-block;
}

// Add data from local form
//
// Markup:
// <form class='file-input'>
// <input type='file'/>
// <label class='btn btn--file-input'>Upload File</label>
// </form>
//
// Style guide: 3.3
//
.url-input {
  &__text-box {
    composes: field from "../../../../Sass/common/_form.scss";
    width: calc(100% - 50px);
    float: left;
    font-family: $font-base;
  }

  &__btn {
    composes: btn from "../../../../Sass/common/_buttons.scss";
    composes: btn-transparent from "../../../../Sass/common/_buttons.scss";
    composes: btn-primary from "../../../../Sass/common/_buttons.scss";

    width: 50px;
    float: left;
  }
}

.dropdown {
  &__list {
    height: 250px;
  }
  @media (max-height: 800px) {
    &__list {
      height: 200px;
    }
  }
  @media (max-height: 700px) {
    &__list {
      height: 150px;
    }
  }
  @media (max-height: 600px) {
    &__list {
      height: 100px;
    }
  }
}
